<template>
    <div>
        <div>vuex counter demo:</div>

        <div style="border:1px solid #ddd;width:300px;margin:30px auto;">
            <dl>
                <dt>
                    在computed中使用mapState 案例
                </dt>
                <dd>
                    otherCount : {{otherCount}}
                </dd>
                <dd>
                    computed: {{doubleCount}}
                </dd>
                <dd>
                    countPlusLocalCount: {{countPlusLocalCount}}
                </dd>
            </dl>
        </div>


        <div>
            <button @click="decrement">减</button>
            <!--counter 是模块名字 -->
            <input type="text" v-model="$store.state.counter.count">
            <button @click="increment">增</button>
        </div>


        <div style="margin-top:30px;">
            纯展示login的状态 {{$store.state.login.isLogin}}
        </div>


    </div>
</template>

<script>
    import { mapState , mapActions, mapMutations } from 'vuex'
    export default {
        name: "vx_demo",
        data () {
            return {
                localCount: 10
            }
        },
        // 没有使用mapState
        /*computed: {
            doubleCount () {
                return this.$store.state.counter.count * 2
            }
        },*/
        // 使用mapState
        computed: mapState('counter',{
            otherCount : 'count',  // 如果直接取count，传字符串参数 'count' 等同于 `state => state.counter.count`,
            doubleCount: (state) => state.count * 2,
            // 为了能够使用 `this` 获取局部状态，必须使用常规函数
            countPlusLocalCount (state) {
                return state.count + this.localCount
            }
        }),

        // dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('action方法名',值)
        // commit：同步操作，写法：this.$store.commit('mutations方法名',值)

        methods: {
            // 这里是mapActions ------ counter 这个是模块名
            ...mapActions('counter',[  // 这个方法 类似下面的2个方法
                'increment',
                'decrement'
            ]),

            /*increment () {
                this.$store.dispatch('counter/increment')  // 这里的$store指向main.js 里面的store
            },
            decrement () {
                this.$store.dispatch('counter/decrement')
            }*/

            // 这里是mapActions ------



            // 这里是mapMutations ------
            // ...mapMutations('counter',[
            //     'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
            //     'decrement'
            // ]),
        }
    }
</script>

<style scoped>

</style>